<template>
	<Table :columns="insideColumns" :data="value"></Table>
</template>

<script>
	import clonedeep from 'clonedeep';

	export default {
		name: "edit-table-multi",
		data() {
			return {
				insideData: [],
				insideColumns: [],
				editingId: '',
				editingContent: ''
			}
		},
		props: {
			columns: {
				type: Array,
				default: () => []
			},
			value: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			columns() {
				this.handleColumns();
			},
			value() {
				this.handleColumns();
			}
		},
		methods:{
			handleClick({row,index,column}) {
				const keyIndex = this.insideData[index].editingKeyArr ? this.insideData[index].editingKeyArr.indexOf(column.key) : -1;
				const rowObj = this.insideData[index];
				if (keyIndex > -1) {
					//把选中的这条数据删除
					rowObj.editingKeyArr.splice(keyIndex, 1);
					this.insideData.splice(index, 1, rowObj);
					this.$emit('input', this.insideData);
					this.$emit('on-edit',{row,index,column,newValue:this.insideData[index][column.key]});
				}else {
					rowObj.editingKeyArr = (rowObj.editingKeyArr) ? [...rowObj.editingKeyArr, column.key] : [column.key];
					this.insideData.splice(index, 1, rowObj);
				}
			},
			handleInput(row,index,column, newValue) {
				this.insideData[index][column.key] = newValue;
			},
			handleColumns() {
				this.insideData=clonedeep(this.value);
				this.insideColumns = this.columns.map(item => {
					if (!item.render && item.editable) {
						item.render = (h, {row, index, column}) => {
							const keyArr = this.insideData[index] ? this.insideData[index].editingKeyArr : [];
							return (
								<div>
									{keyArr && keyArr.indexOf(column.key)>-1
										? <i-input value={row[column.key]} style="width:50px;" on-input={this.handleInput.bind(this, row, index, column)} ></i-input>
										: <span>{row[column.key]}</span>}
									<i-button on-click={ this.handleClick.bind(this, {row, index, column})}> {keyArr && keyArr.indexOf(column.key)>-1 ? '保存' : '编辑'}</i-button>
								</div>
							)
						};
						return item;
					} else return item;
				});
			}
		},
		mounted() {
			this.handleColumns();
		}
	}
</script>

<style scoped>

</style>
